<style scope>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<template>
  <div>
    <el-row style="margin-top: 20px" type="flex" justify="center">
      <el-col :span="23">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="订单ID" prop="orderUid">
            <el-input v-model="searchForm.orderUid"></el-input>
          </el-form-item>

          <el-button size="small" type="primary" @click="init">搜索</el-button>
          <el-button size="small" @click="resetSearch('searchForm')"
            >重置</el-button
          >
        </el-form>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" style="margin-bottom: 10px"> </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="23">
        <el-alert
          title
          type="success"
          :closable="false"
          show-icon
          class="alert_bottom"
        >
          已选择
          <span>{{ 0 }}</span> 项
          <a @click="clearSelectAll" style="color: red">清空</a>
        </el-alert>

        <el-table
          :row-style="{ height: '80px' }"
          size="small"
          ref="multipleTable"
          :border="false"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="500"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="orderUid" label="订单ID"></el-table-column>
          <el-table-column prop="userName" label="用户名称"></el-table-column>
          <el-table-column prop="userId" label="用户ID"></el-table-column>
          <el-table-column prop="deskNum" label="桌号"></el-table-column>

          <el-table-column
            prop="totalPrice"
            label="订单总金额"
          ></el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="showOrderDetail(scope.row)"
                type="primary"
                size="mini"
                >查看订单详细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end">
      <el-col :span="8">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNumber"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      top="6vh"
      :title="titleText"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="closeDialog"
    >
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <el-table :data="orderDetails" height="550">
            <el-table-column prop="foodInfoResultVo.foodName" label="菜品名称">
            </el-table-column>

            <el-table-column prop="foodInfoResultVo.foodType" label="菜品类型">
            </el-table-column>

            <el-table-column prop="foodInfoResultVo.foodImage" label="菜品图片">
              <template slot-scope="scope">
                <img
                  style="width: 70px; height: 60px"
                  :src="scope.row.foodInfoResultVo.foodImage"
                />
              </template>
            </el-table-column>
            <el-table-column prop="count" label="数量"> </el-table-column>

            <el-table-column prop="foodInfoResultVo.foodPrice" label="菜品单价">
            </el-table-column>
            <el-table-column prop="foodSum" label="菜品金额汇总">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { findOrderInfoByCondition } from "@/api/order/order-api";

export default {
  /* eslint-disable */
  name: "user",
  data() {
    return {
      orderDetails: [],

      //edit / add
      tableData: [],

      titleText: "订单详细",
      dialogVisible: false,

      // page
      total: 0,
      searchForm: {
        orderUid: "",
        pageNumber: 0,
        pageSize: 10,
      },
    };
  },

  methods: {
    clearSelectAll() {},
    handleSelectionChange() {},

    showOrderDetail(row) {
      this.orderDetails = row.orderFoodDetailResultVos;
      this.dialogVisible = true;
    },

    init() {
      findOrderInfoByCondition(this.searchForm).then((response) => {
        if (response.msg === "success") {
          this.total = response.data.totalElements;
          this.tableData = response.data.content;
        }
      });

      //   this.total = this.response.totalElements;
      //   this.tableData = this.response.data.content;
    },

    //重置
    resetSearch(formName) {
      this.$refs[formName].resetFields();
      this.init();
    },
    //page
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber;
      this.init();
    },

    closeDialog() {
      this.dialogVisible = false;
    },
  },

  created() {
    this.init();
  },
  mounted() {},
};
</script>

<style scoped>
/* eslint-disable */
.alert_bottom {
  margin-bottom: 20px;
}
/* eslint-disable */
</style>